<template>
  <!-- 资讯列表页面 -->
  <div class="providing">
    <!-- 头部 -->
    <div class="header">
      <!-- 产品栏目下拉框 -->
      <el-select v-model="providingStatus" size="small " clearable placeholder="状态">
       <el-option label="未审核" value="未审核"></el-option>
        <el-option label="审核通过" value="审核通过"></el-option>
        <el-option label="审核未通过" value="审核未通过"></el-option>
        <el-option label="推荐" value="推荐"></el-option>
      </el-select>
      <!-- 输入框 -->
      <el-input placeholder="标题" style="width:200px" v-model="providingName" size="small " clearable></el-input>

      <!-- 产品栏目下拉框 -->
      <el-select v-model="providingCategory" size="small " clearable placeholder="请选择栏目">
        <el-option
          v-for="providing in ProvidingData.filter((item) => !item.parentId)"
          :key="providing.id"
          :label="providing.name"
          :value="providing.id"
        ></el-option>
      </el-select>
      <!-- 查询 -->
      <el-button type="primary" size="small " @click="queryProviding">查询</el-button>
      <!-- 发布风采 -->
      <el-button type="primary" size="small " style="float: right;" @click="mien">发布风采</el-button>
    </div>
    <!-- 主体内容 -->
    <div class="conten">
      <el-table :data="providingData" style="width: 100%" size="small " @row-click="fencaiTable">
        <!-- 序号 -->
        <el-table-column fixed type="index" label="序号" width="60px" align="center" ></el-table-column>
        <!-- 封面 -->
        <el-table-column fixed  label="封面" align="center">
          <template slot-scope="scope">
          <el-image
            style="width: 100px; height: 100px"
             :src="scope.row.cover">
            </el-image>
             </template>
        </el-table-column>
        <!-- 风采 -->
        <el-table-column label="风采" width="200px" align="center">
            <template slot-scope="scope">
            <p type="text" size="small">{{scope.row.title}}</p>
            <p type="text" size="small"  v-if="!scope.row.baseUser">123456</p>
            <p type="text" size="small"  v-else>{{scope.row.baseUser.realname}}</p>
            <p v-if="!scope.row.category" type="text" size="small">----</p>
            <p v-else type="text" size="small">{{scope.row.category.name}}</p>
            <p type="text" size="small">{{scope.row.publishTime}}</p>
          </template>
        </el-table-column>
        <!-- 状态 -->
        <el-table-column prop="status" label="状态" width="700px" align="center"></el-table-column>
        <!-- 操作 -->
        <el-table-column fixed="right" label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click.stop="recommend(scope.row.id,status='推荐')">推荐</el-button>
            <el-button type="text" size="small" style="color: mediumslateblue;" @click.stop="compiler(scope.row)">审核</el-button>
            <el-button type="text" size="small" style="color:red" @click.stop="deleted(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 模态框 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible">
      <!-- 内容区域 -->
      <p style="text-align: center;font-size:20px">{{productForm.title}}</p>
      <p v-html="productForm.content" style="font-size:15px">{{productForm.content}}</p>
      <!-- 底部操作按钮区域 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogclose(productForm.id,status='审核不通过')">审核不通过</el-button>
        <!-- 提交表单后 调用重置表单的方法 -->
        <el-button type="primary"  @click="examined(productForm.id,status='审核通过')">
          审核通过
        </el-button>
      </span>
    </el-dialog>
    <!-- 底部分页区域 -->
    <div class="paginetion">
      <!-- 分页组件 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[2, 5, 10, 15,20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
// 引入axios
import { get, post } from "@/utils/request";
// 引入vuex的辅助函数
import { mapActions, mapState } from "vuex";
import moment from "moment";
import { log } from '@antv/g2plot/lib/utils';
export default {
  data() {
    return {
      // 咨询信息数组 - 表格的数据源的数据
      providingData: [],
      // 咨询名称-输入
      providingName: "",
      //  咨询状态-下拉选择
      providingStatus: "",
      // 咨询栏目-下拉选择
      providingCategory: "",
      // 定一个查询的参数
      queryData: {},
       // 当前的页码
      currentPage: 1,
      // 每页要展示的数据条数
      pageSize: 10,
      // 页面展示数据的总条数
      total: 10,
      // 控制模态框的显示与隐藏
      dialogVisible: false,
      // 模态框的标题
      dialogTitle: "审核风采信息",
      //模态框内容
      productForm:{
        // id
        id:"",
        // 标题
        title:"",
        // 内容
        content:"",
      }
    };
  },
  computed: {
    // 使用辅助函数
    ...mapState("providing", ["ProvidingData"]),
    //...mapState("fencaitable",["fencaitableData"])
  },
  methods: {
    compiler(row) {
      // 将当前点击的这一行的对象 赋值到 表单对象里
      // 浅拷贝 赋值对象的引用 对象的内存地址 用的还是用一个
      // 深拷贝
      this.productForm = { ...row };
      // 设置模态框的标题
      this.dialogTitle = "审核风采信息";
      // 模态框显示出来
      this.dialogVisible = true;
    },
    // 关闭模态框 调用表单重置的方法
    async dialogclose(id,status){
      let res =await post("/article/changeStatus", {id,status});
        if (res.status == 200) {
        // 重新刷新页面的数据
        this.getAllprovidingData();
        }
          this.$message({
            type: 'success',
            message: '审核不成功!'
          });
      // 关闭模态框
       setTimeout(() => {
        this.dialogVisible = false
         }, 200);
    },
    // 模态框确认按钮
    async examined(id,status){
       let res =await post("/article/changeStatus", {id,status});
        if (res.status == 200) {
        // 重新刷新页面的数据
        this.getAllprovidingData();
        }
          this.$message({
            type: 'success',
            message: '审核成功!'
          });
          // 关闭模态框
          setTimeout(() => {
        this.dialogVisible = false
         }, 200);
    },

    // 通过命名空间找到category对应的vuex模块 调用它模块里的方法
    // ...mapActions('category模块的文件名',['对应的方法'])
    ...mapActions("providing", ["getAllProvidData"]),
    //...mapActions("fencaitable", ["getfencaitableData"]),
      //vuex查询数据
     queryCategoryData() {
      // 定义参数
      let data = {
        page: 1,
        pageSize: 100,
      };
      // 调用vuex中定义好的方法
      this.getAllProvidData(data);
    },
    //vuex查询数据
     queryfencaitableData() {
      // 定义参数
      let data = {
        page: 1,
        pageSize: 100,
      };
      // 调用vuex中定义好的方法
      this.getfencaitableData(data);
    },

    // 获取所有数据
    async getAllprovidingData() {
      // 获取参数
      let data = {
        page: this.currentPage,
        pageSize: this.pageSize,
      };
      // 通过对应的参数发送网络请求 获取产品数组数据
      let res = await get("/article/pageQuery", { ...data, ...this.queryData });
      for(let item of res.data.list){
        item.publishTime=this.turnTime(item.publishTime);
      };
      // 将data中的产品数组 进行赋值
      this.providingData = res.data.list;
      // 页面总数据条数 赋值
      this.total = res.data.total;
    },
    // 时间转换
    turnTime(date){//把时间戳转成时间日期 方法
    return moment(date).format('YYYY-MM-DD');
    },
    /**
     * @description: 控制每页数据条数
     * @param {*} val 每页要展示的数据条数
     * @return {*}
     * @author: ZachGmy
     */
   handleSizeChange(val) {
      // 将每页要展示的数据的条数 进行一个更新
      this.pageSize = val
      // 将当前的页数 重置到第一页
      this.currentPage = 1
      // 重新调用获取所有产品数据的方法
      this.getAllprovidingData()
    },
    /**
     * @description: 控制当前显示的页数
     * @param {*} val 当前的页码
     * @return {*}
     * @author: ZachGmy
     */
    handleCurrentChange(val) {
      // 将当前页数 与 分页插件动态点击控制的页数相绑定
      this.currentPage = val
      // 重新调用获取所有产品数据的方法
      this.getAllprovidingData()
    },
    // 查询咨询标题
     queryProviding() {
      // 定义参数
      let data = {
        // 咨询标题
        title: this.providingName,
        // 咨询状态
        status: this.providingStatus,
        //风采
        categoryId:this.providingCategory,
      };
      // 格式化参数 当某个属性没有值的时候 将其删除掉 以防影响网络请求的操作
      for (const key in data) {
        if (!data[key]) {
          delete data[key];
        }
      }
      // 将参数 赋值给 queryData
      this.queryData = data;
      // 将页数强制回到第一页
      this.currentPage = 1;
      // 重新加载产品数据
      this.getAllprovidingData();
    },
    //推荐提示框
      recommend(id,status) {
        this.$confirm('您确定要推荐此资讯吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(async () => {
        let res = await post("/article/changeStatus", {id,status});
        if (res.status == 200) {
        // 重新刷新页面的数据
        this.getAllprovidingData();
        }
          this.$message({
            type: 'success',
            message: '审核成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消推荐'
          });
        });
      },
      //审核
      // compiler(id,title,content,status,status_1){
      //   this.$confirm(content, '审核风采信息', {
      //     confirmButtonText: '审核成功',
      //     cancelButtonText: '审核不通过',
      //     type: 'warning',
      //   }).then(async () => {
      //   let res =await post("/article/changeStatus", {id,status});
      //   if (res.status == 200) {
      //   // 重新刷新页面的数据
      //   this.getAllprovidingData();
      //   }
      //     this.$message({
      //       type: 'success',
      //       message: '审核成功!'
      //     });
      //   }).catch(async() => {
      //     let status=status_1
      //     let res =await post("/article/changeStatus", {id,status});
      //     if(res.status == 200){
      //       // 重新刷新页面的数据
      //   this.getAllprovidingData();
      //     }
      //     this.$message({
      //       type: 'info',
      //       message: '审核不通过!'
      //     });
      //   });
      // },
      //删除
      deleted(id){
       this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
        let res = await get("/article/deleteById", { id });
        if (res.status == 200) {
        // 重新刷新页面的数据
        this.getAllprovidingData();
      } else {
        this.$message.error(res.message);
      }
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      // 发布风采详情页面跳转
      mien(){
        this.$router.push({
        path:'/admin/info/article/Publish',
        });
      },
      // 主体内容跳转
      fencaiTable(row){
        this.$router.push({
        path:'/admin/info/article/Details',
        query:{
          id:row.id,
        }
        });
      }
  },
  created() {
    this.getAllprovidingData();
    this.queryCategoryData();
    //this.queryfencaitableData()
  },
  mounted() {},
};
</script>
<style scoped>
/* 设置header的样式 */
.header {
  line-height: 40px;
}
/* 分页区域的样式 */
.paginetion {
  float: right;
  bottom: 40px;
  right: 10px;
}
</style>
